<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <svg-icon icon-class="aa" /><span>江苏传智播客教育科技股份有限公司</span>
          </el-col>

          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>

              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 以下是树状数据铺设 -->
        <el-tree :data="list" :default-expand-all="true">
          <!-- 作用域插槽 data拿到的是每一个子节点的对象 -->
          <!--
      什么时候用到作用域插槽？父组件中如果想使用子组件中的数据进行自定义内容的渲染 (类似于table 单元格数据渲染)
    -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          @click.native="addFn(data.id)"
                        >添加子部门</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="editFn(data.id)"
                        >编辑部门</el-dropdown-item>
                        <el-dropdown-item
                          v-if="data.children.length === 0"
                          @click.native="delFn(data.id)"
                        >删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>

    <el-dialog
      :title="isEdit ? '编辑' : '添加'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
    >
      <!-- @close="hDialogClose" -->
      <!-- 点击遮罩层 关闭弹框 -->
      <!-- esc键 关闭弹框 -->

      <!-- 以下是子组件编辑 -->
      <addor-edit
        v-if="showDialog"
        :id="curId"
        :is-edit="isEdit"
        :origin-list="originList"
        @update-depart="hUpdateDepart"
        @close="hClose"
      />
      <!-- @update-depart 子传父过来的事件 -->
    </el-dialog>
  </div>
</template>

<script>
import { getDepartments, delDepartment } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'// 将平铺数据转成树状数据
import AddorEdit from './deptDialog.vue' // 引入弹框
export default {
  components: { AddorEdit }, // 注册组件名
  data() {
    return {
      isEdit: false, // 当前是否处于编辑
      curId: '', // 当前操作部门的Id
      showDialog: false, // 增加弹框的开关
      list: [],
      originList: []// 传子组件做表单校验的源数据
    }
  },

  created() { // 定义loadDepartments方法来加载数据
    this.loadDepartments()
  },

  methods: {

    async loadDepartments() { // 获取组织架构数据
      try {
        const res = await getDepartments()
        // console.log(res)// 打印返回结果

        const root = res.data.depts.shift() // 获取到最高级`传智教育`的根签
        // console.log(root) //打印根签 `传智教育`

        // res.data.depts// 传子组件内需要验证的数据
        this.originList = res.data.depts.map(({ id, pid, code, name }) => { return { id, pid, code, name } })// 验证不得重复

        root.children = tranListToTreeData(res.data.depts)
        this.list = [root]

        // this.list = tranListToTreeData(res.data.depts)// 调用方法进行转换
      } catch (err) {
        // console.log(err)
      }
    },

    addFn(id) { // 添加子部门事件
      this.curId = id// 获取当前操作部门的id
      this.showDialog = true // 弹层的开关
      this.isEdit = false // 更新编辑状态
    },
    editFn(id) { // 编辑部门
      this.curId = id// 获取当前操作部门的id
      this.showDialog = true // 弹层的开关
      this.isEdit = true // 更新编辑状态
    //   this.$nextTick(() => {
    //     this.$refs.refDeptDialog.loadDetail()
    //   })
    },

    async doDel(id) { // 删除部门
      try {
        const res = await delDepartment(id)
        console.log(res)
        // 1. 提示
        this.$message({ type: 'success', message: '删除成功!' })
        // 2. 更新数据
        this.loadDepartments()
      } catch (err) {
        // console.log(err)
        this.$message({ type: 'error', message: '删除失败' })
      }
    },
    delFn(id) { // 删除部门
      this.$confirm('此操作将永久删除部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 做删除
        this.doDel(id)
      }).catch(() => {

      })
    },

    hUpdateDepart() { // 子传父函数
      this.showDialog = false// 关弹窗
      this.loadDepartments()// 更新数据
    },
    hClose() {
      this.showDialog = false
    }
    // hDialogClose() {
    //   console.log('在关闭弹层时，统一去重置子组件中表单。close.................')
    //   this.$refs.refDeptDialog.resetForm()
    // }

  }
}
</script>
